<template>
  <div>
    <div class="personal-outer">
      <el-card shadow="hover">
        <div slot="header" class="clearfix">
          <span style="font:20px bold ">实名认证</span>
        </div>
        <div>
          <el-form ref="elForm" :model="userRealAuthentication" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="真实姓名" prop="realName">
              <el-input v-model="userRealAuthentication.realName" placeholder="请输入真实姓名"
                        show-word-limit clearable prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="documentsType">
              <el-select v-model="userRealAuthentication.documentsType" placeholder="请选择证件类型" clearable
                         :style="{width: '100%'}">
                <el-option v-for="(item, index) in documentsTypeOptions" :key="index" :label="item.label"
                           :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="idcardNumber">
              <el-input v-model="userRealAuthentication.idcardNumber" placeholder="请输入证件号码" clearable
                        :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="证件正面" prop="frontPicture" required>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8050/user/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="pictureBeforeUpload"
                name="imgFile">
                <img v-if="imageUrl" :src="minioBasePath+imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="证件背面" prop="oppositePicture" required>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8050/user/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="pictureBeforeUpload"
                name="imgFile">
                <img v-if="imageUrl1" :src="minioBasePath+imageUrl1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="本人照片" prop="peoplePicture" required>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8050/user/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="pictureBeforeUpload"
                name="imgFile">
                <img v-if="imageUrl1" :src="minioBasePath+imageUrl2" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的image/*文件</div>
              </el-upload>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import user from '../../api/personal/user'
import { getInfo } from '../../api/login'
export default {
  name: 'authentication',
  data(){
    return{
      userRealAuthentication: {
        realName: undefined,
        documentsType: undefined,
        idcardNumber: undefined,
        frontPicture: null,
        oppositePicture: null,
        peoplePicture: null,
        fkUserId:undefined,
      },
      rules: {
        realName: [{
          required: true,
          message: '请输入真实姓名',
          trigger: 'blur'
        }],
        documentsType: [{
          required: true,
          message: '请选择证件类型',
          trigger: 'change'
        }],
        idcardNumber: [{
          required: true,
          message: '请输入证件号码',
          trigger: 'blur'
        }],
      },
      documentsTypeOptions: [{
        "label": "居民身份证",
        "value": 0
      }, {
        "label": "护照",
        "value": 1
      }, {
        "label": "港澳台回乡证",
        "value": 2
      }],
      imageUrl:"",
      imageUrl1:"",
      imageUrl2:"",
      minioBasePath:"http://43.139.117.45:9000/sdd/"
    }
  },
  created() {
    user.queryUserByMobile(this.$store.state.member.mobile).then(res=>{
      this.userRealAuthentication.fkUserId=res.data.id;
    })
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        user.firstAuthentication(this.userRealAuthentication,this.$route.query.authenticationStatus).then(response=>{
          this.$router.push({ name: 'personalHome' })
          this.$message.success("提交成功,正在审核")
        }).catch();
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    pictureBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    handleAvatarSuccess(res,file){
      this.imageUrl=res.data;
      this.userRealAuthentication.frontPicture=res.data;
    },
    handleAvatarSuccess1(res,file){
      this.imageUrl1=res.data;
      this.userRealAuthentication.oppositePicture=res.data;
    },
    handleAvatarSuccess2(res,file){
      this.imageUrl2=res.data;
      this.userRealAuthentication.peoplePicture=res.data;
    }
  }
}
</script>

<style scoped>
.personal-outer{
  margin: 20px 100px 100px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
